import styled from 'styled-components'
import { useDispatch, useSelector } from 'react-redux'
import { updateAllStateAction } from '../store/actions/cart.js'

const Wrapper = styled.div`
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  border-top: 1px solid #efefef;
  width: 100%;
  padding: 0px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;

  .form-check-label {
    position: relative;
    top: 1px;
  }

  .amt {
    font-weight: bold;
    color: red;
  }

  .btn-warning {
    font-size: 12px;
  }
`

export default function Footer() {
  const dispatch = useDispatch()
  const isFull = useSelector(state => state.cart.every(x => x.goods_state))
  const amount = useSelector(state =>
    state.cart.filter(x => x.goods_state).reduce((t, x) => (t += x.goods_price * x.goods_count), 0)
  )
  const total = useSelector(state => state.cart.filter(x => x.goods_state).reduce((t, x) => (t += x.goods_count), 0))

  return (
    <Wrapper>
      {/* 全选 */}
      <div className="form-check">
        <input
          className="form-check-input"
          type="checkbox"
          id="flexCheckDefault"
          checked={isFull}
          onChange={e => dispatch(updateAllStateAction(e.target.checked))}
        />
        <label className="form-check-label" htmlFor="flexCheckDefault">
          {isFull ? '反选' : '全选'}
        </label>
      </div>

      {/* 总价 */}
      <span>
        总价：<span className="amt">￥{amount}</span>
      </span>

      <button type="button" className="btn btn-warning">
        结算({total})
      </button>
    </Wrapper>
  )
}
